<template>
  <div class="home" :contenteditable="editSwitch">
    <!-- 头部查询表单 -->
    <div class="home-form-box">
      <el-form ref="formRefs" :model="form" label-width="80px">
        <div class="home-form">
          <el-form-item label="类型" prop="typeValue">
            <el-select v-model="form.typeValue" placeholder="请选择" @change="changeClick">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="医院" prop="hospitalValue">
            <el-select v-model="form.hospitalValue" placeholder="请选择" @change="hospitalClick">
              <el-option v-for="item in hospitalList" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.typeValue === '非全院'" label="科室" prop="departmentValue">
            <el-select v-model="form.departmentValue" placeholder="请选择">
              <el-option v-for="item in departmentList" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="病组编码">
            <el-input v-model="form.drg_code" placeholder="请输入病组编码"></el-input>
          </el-form-item>
          <div style="margin: 0 0 0 20px; display: flex">
            <el-button @click="lookClick">查询</el-button>
            <el-button type="warning" @click="exportPDF">导出</el-button>
            <el-switch v-model="editSwitch" size="large" active-text="编辑" inactive-text="预览" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" @change="editSwitchChange" />
          </div>
        </div>
      </el-form>
    </div>

    <!-- 加载提示 -->
    <div class="loading-class" v-if="fullscreenLoading">
      导出中{{ processedPages + '/' + totalPages }}
      <div class="loader"></div>
    </div>
    <div class="loading-class" v-if="loadingShow">
      加载中
      <div class="loader"></div>
    </div>

    <!-- 内容区域 -->
    <div v-if="medicalInsuranceData" :key="randomKey" class="home" ref="pdfContent" id="pdf-content">
      <!-- 固定页面（首页、目录等） -->
      <div class="home-page home-page-1">
        <div class="home-title-1">
          <div class="home-title-1-1">
            <div class="home-title-1-1-content" v-if="medicalInsuranceData['首页']">
              医保DRG运营分析报告 -
              {{ medicalInsuranceData['首页'].title }}
              <span v-if="medicalInsuranceData['首页'].medGroupDep">({{ medicalInsuranceData['首页'].medGroupDep }})</span>
            </div>
          </div>
        </div>
        <div class="home-title-2">
          <div class="home-title-2-1">医保DRG智能管控</div>
        </div>
        <div class="home-title-3" v-if="medicalInsuranceData['首页']">
          浙江建达科技股份有限公司 ©copyright
          {{ medicalInsuranceData['首页'].title.split('年')[0] }}
          All rights reserved
        </div>
        <div class="home-title-4" v-if="medicalInsuranceData['首页']">
          {{ medicalInsuranceData['首页'].hosName }}
        </div>
        <div class="home-title-5"></div>
      </div>
      <div style="page-break-after: always"></div>

      <div class="home-page home-page-2">
        <div class="home-page-2-left">
          <div class="home-page-2-left-1">目录</div>
          <div class="home-page-2-left-2">CONTENT</div>
        </div>
        <div class="home-page-2-right">
          <div class="home-page-2-right-1">一、DRG运营状况</div>
          <div class="home-page-2-right-2">二、超支结余分析</div>
          <div class="home-page-2-right-3">三、科室医疗组分析</div>
          <div class="home-page-2-right-4">四、病组结余分析</div>
          <div class="home-page-2-right-5">五、高低倍及异常分析</div>
          <div class="home-page-2-right-6">六、学科发展分析</div>
        </div>
      </div>
      <div style="page-break-after: always"></div>
      <!-- 动态渲染配置的页面 -->
      <div v-for="(page, index) in pageConfigs" :key="index">
        <!-- 标题页 -->
        <template v-if="page.type === 'title'">
          <div class="home-page" :class="page.class">
            <titleBox :titleIndex="page.titleIndex" :titleName="page.titleName" />
          </div>
          <div style="page-break-after: always"></div>
        </template>

        <!-- 内容页 -->
        <template v-else>
          <div class="home-page" v-if="shouldShowPage(page)">
            <pageTile :editSwitch="editSwitch" :pageTile="getTitleKey(page.key)" :pageTileDate="getPageTileDate(page.key)" @editDialogClick="editDialogClick(page.component)">
              <component :is="page.component" :ref="page.component + 'Refs'" />
            </pageTile>
          </div>
          <div style="page-break-after: always" v-if="shouldShowPage(page)"></div>
        </template>
      </div>

      <!-- 结尾页面 -->
      <div class="home-page">
        <div class="home-end"></div>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <div class="edit-dialog" v-if="showEditDialog">
      <div class="edit-dialog__content">
        <div class="edit-dialog__header">
          <div class="edit-dialog__title">{{ editForm.title }} {{ editForm.date }}</div>
          <div class="edit-dialog__close" @click="closeDialog">×</div>
        </div>
        <div class="edit-dialog__body">
          <Vue3JsonEditor
            v-model="medicalInsuranceData[activePageTileKey]"
            :show-btns="true"
            :expandedOnStart="false"
            lang="zh"
            style="width: 100%; height: 100%"
            :mode="'text'"
            :modes="['text', 'view', 'code']"
            @change="onJsonChange"
          />
        </div>
        <div class="edit-dialog__footer">
          <button class="edit-dialog__btn edit-dialog__btn--cancel" @click="closeDialog">取消</button>
          <button class="edit-dialog__btn edit-dialog__btn--confirm" @click="confirmEdit">确定</button>
        </div>
      </div>
    </div>
    <div class="edit-dialog__mask" v-if="showEditDialog" @click="closeDialog"></div>
  </div>
</template>

<script>
import Vue3JsonEditor from 'json-editor-vue3';
import domtoimage from 'dom-to-image';
import jsPDF from 'jspdf';

import titleBox from './components/titleBox/titleBox';
import pageTile from './components/pageTile/pageTile';
import axios from 'axios';
// 动态导入所有页面组件
const pageComponents = {};
const requireComponent = require.context('./', true, /\/pageTile[\d_]+\/pageTile[\d_]+\.vue$/);

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.split('/').pop().replace('.vue', '');
  pageComponents[componentName] = componentConfig.default || componentConfig;
});

export default {
  name: 'home',
  components: {
    ...pageComponents,
    titleBox,
    pageTile,
    Vue3JsonEditor,
  },
  data() {
    return {
      // 表单数据
      form: {
        typeValue: '全院',
        hospitalValue: '',
        departmentValue: '',
        drg_code: '',
      },
      // 医保数据
      medicalInsuranceData: {},
      fullscreenLoading: false,
      randomKey: null,
      loadingShow: false,
      // 导出相关
      processedPages: 0,
      // 总页数
      totalPages: 0,
      // 编辑模式
      editSwitch: false,
      // 编辑弹窗相关
      showEditDialog: false,
      activePageTileKey: '',
      activePageRefs: '',
      // 数据列表
      hospitalList: [],
      departmentList: [],
      diagnosisReportList: [],
      // 选项
      options: [
        { label: '全院', value: '全院' },
        { label: '非全院', value: '非全院' },
      ],
      // 编辑表单
      editForm: {
        title: '',
        date: '',
      },
      // 页面配置
      pageConfigs: [
        { type: 'title', titleIndex: '01', titleName: 'DRG运营状况', class: 'home-page-3' },
        { type: 'content', key: 'pageTile4Key', component: 'pageTile4', titleText: '医院整体运营指标' },
        { type: 'content', key: 'pageTile5Key', component: 'pageTile5', titleText: '运营趋势' },
        { type: 'title', titleIndex: '02', titleName: '超支结余分析' },
        { type: 'content', key: 'pageTile9Key', component: 'pageTile9', titleText: '超支结余趋势' },
        { type: 'content', key: 'pageTile10Key', component: 'pageTile10', titleText: 'MDC大类超支分析' },
        { type: 'title', titleIndex: '03', titleName: '科室医疗组分析' },
        { type: 'content', key: 'pageTile12Key', component: 'pageTile12', titleText: '科室超支结余情况' },
        { type: 'content', key: 'pageTile12_1Key', component: 'pageTile12_1', titleText: '基础病组科室分布' },
        { type: 'content', key: 'pageTile12_2Key', component: 'pageTile12_2', titleText: '医保超支结余月度趋势分析' },
        { type: 'content', key: 'pageTile12_3Key', component: 'pageTile12_3', titleText: '各病例类型的超支结余变化趋势' },
        { type: 'content', key: 'pageTile12_4Key', component: 'pageTile12_4', titleText: '病例类型分布' },
        { type: 'content', key: 'pageTile13Key', component: 'pageTile13', titleText: '科室超支TOP10' },
        { type: 'content', key: 'pageTile14Key', component: 'pageTile14', titleText: '科室结余TOP10' },
        { type: 'content', key: 'pageTile15Key', component: 'pageTile15', titleText: '超支排名第1科室-病组分布' },
        { type: 'content', key: 'pageTile15_7Key', component: 'pageTile15_7', titleText: '超支排名第2科室-病组分布' },
        { type: 'content', key: 'pageTile15_11Key', component: 'pageTile15_11', titleText: '超支排名第3科室-病组分布' },
        { type: 'content', key: 'pageTile15_18Key', component: 'pageTile15_18', titleText: '超支排名第4科室-病组分布' },
        { type: 'content', key: 'pageTile15_19Key', component: 'pageTile15_19', titleText: '超支排名第5科室-病组分布' },
        { type: 'content', key: 'pageTile15_1Key', component: 'pageTile15_1', titleText: '超支排名第1病组-费用构成' },
        { type: 'content', key: 'pageTile15_9Key', component: 'pageTile15_9', titleText: '超支排名第2病组-费用构成' },
        { type: 'content', key: 'pageTile15_10Key', component: 'pageTile15_10', titleText: '超支排名第3病组-费用构成' },
        { type: 'content', key: 'pageTile15_2Key', component: 'pageTile15_2', titleText: '超支排名第1科室-费用构成' },
        { type: 'content', key: 'pageTile15_8Key', component: 'pageTile15_8', titleText: '超支排名第2科室-费用构成' },
        { type: 'content', key: 'pageTile15_12Key', component: 'pageTile15_12', titleText: '超支排名第3科室-费用构成' },
        { type: 'content', key: 'pageTile15_14Key', component: 'pageTile15_14', titleText: '超支排名第4科室-费用构成' },
        { type: 'content', key: 'pageTile15_16Key', component: 'pageTile15_16', titleText: '超支排名第5科室-费用构成' },
        { type: 'content', key: 'pageTile15_3Key', component: 'pageTile15_3', titleText: '超支排名第1科室 {科室名称}-医疗服务效率变化趋势' },
        { type: 'content', key: 'pageTile15_4Key', component: 'pageTile15_4', titleText: '超支排名第1科室 {科室名称}-结余变化趋势' },
        { type: 'content', key: 'pageTile15_5Key', component: 'pageTile15_5', titleText: '超支排名第2科室 {科室名称}-医疗服务效率变化趋势' },
        { type: 'content', key: 'pageTile15_6Key', component: 'pageTile15_6', titleText: '超支排名第2科室 {科室名称}-结余变化趋势' },
        { type: 'content', key: 'pageTile15_20Key', component: 'pageTile15_20', titleText: '超支排名第3科室 {科室名称}-医疗服务效率变化趋势' },
        { type: 'content', key: 'pageTile15_13Key', component: 'pageTile15_13', titleText: '超支排名第3科室 {科室名称}-结余变化趋势' },
        { type: 'content', key: 'pageTile15_21Key', component: 'pageTile15_21', titleText: '超支排名第4科室 {科室名称}-医疗服务效率变化趋势' },
        { type: 'content', key: 'pageTile15_15Key', component: 'pageTile15_15', titleText: '超支排名第4科室 {科室名称}-结余变化趋势' },
        { type: 'content', key: 'pageTile15_22Key', component: 'pageTile15_22', titleText: '超支排名第5科室 {科室名称}-医疗服务效率变化趋势' },
        { type: 'content', key: 'pageTile15_17Key', component: 'pageTile15_17', titleText: '超支排名第5科室 {科室名称}-结余变化趋势' },
        { type: 'content', key: 'pageTile16Key', component: 'pageTile16', titleText: '总权前15医疗组' },
        { type: 'title', titleIndex: '04', titleName: '病组结余分析' },
        { type: 'content', key: 'pageTile18Key', component: 'pageTile18', titleText: '病组超支结余情况' },
        { type: 'content', key: 'pageTile18_1Key', component: 'pageTile18_1', titleText: '基础病组分布情况' },
        { type: 'content', key: 'pageTile19Key', component: 'pageTile19', titleText: '病组超支TOP10' },
        { type: 'content', key: 'pageTile19_2Key', component: 'pageTile19_2', titleText: '超支排名第1病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_3Key', component: 'pageTile19_3', titleText: '超支排名第2病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_4Key', component: 'pageTile19_4', titleText: '超支排名第3病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_8Key', component: 'pageTile19_8', titleText: '超支排名第4病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_9Key', component: 'pageTile19_9', titleText: '超支排名第5病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_10Key', component: 'pageTile19_10', titleText: '超支排名第6病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_11Key', component: 'pageTile19_11', titleText: '超支排名第7病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_12Key', component: 'pageTile19_12', titleText: '超支排名第8病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_13Key', component: 'pageTile19_13', titleText: '超支排名第9病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_14Key', component: 'pageTile19_14', titleText: '超支排名第10病组--相同病组不同科室比较分析' },
        { type: 'content', key: 'pageTile19_5Key', component: 'pageTile19_5', titleText: '相同病组不同操作比较分析TOP1' },
        { type: 'content', key: 'pageTile19_6Key', component: 'pageTile19_6', titleText: '相同病组不同操作比较分析TOP2' },
        { type: 'content', key: 'pageTile19_7Key', component: 'pageTile19_7', titleText: '相同病组不同操作比较分析TOP3' },
        { type: 'content', key: 'pageTile19_1Key', component: 'pageTile19_1', titleText: '病组超支原因分析--高倍率异常病例分析' },
        { type: 'content', key: 'pageTile20Key', component: 'pageTile20', titleText: '病组结余TOP10' },
        { type: 'content', key: 'pageTile20_1Key', component: 'pageTile20_1', titleText: '' },
        { type: 'title', titleIndex: '05', titleName: '高低倍及异常分析' },
        { type: 'content', key: 'pageTile22Key', component: 'pageTile22', titleText: '高倍率病例结余情况' },
        { type: 'content', key: 'pageTile23Key', component: 'pageTile23', titleText: '低倍率病例结余情况' },
        { type: 'content', key: 'pageTile24Key', component: 'pageTile24', titleText: '全院15日再入院情况' },
        { type: 'content', key: 'pageTile26Key', component: 'pageTile26', titleText: '扣款情况' },
        { type: 'title', titleIndex: '06', titleName: '学科发展分析' },
        { type: 'content', key: 'pageTile6Key', component: 'pageTile6', titleText: '学科建设' },
        { type: 'content', key: 'pageTile7Key', component: 'pageTile7', titleText: '医院优势' },
        { type: 'content', key: 'pageTile12_5Key', component: 'pageTile12_5', titleText: 'RW区间分布' },
        { type: 'content', key: 'pageTile25Key', component: 'pageTile25', titleText: '总结' },
      ],
    };
  },
  methods: {
    // 判断页面是否应该显示
    shouldShowPage(page) {
      // 获取页面对应的标题文本
      const keyValue = page.titleText;
      const dataExists = keyValue && this.medicalInsuranceData[keyValue];

      // 特殊页面处理
      if (page.key === 'pageTile16Key') {
        const data = this.medicalInsuranceData[page.titleText];
        return data && data.data_list?.[0]?.['医疗组'] !== '无医疗组';
      }
      return dataExists;
    },

    // 获取标题键
    getTitleKey(pageKey) {
      const page = this.pageConfigs.find(config => config.key === pageKey);
      return page ? page.titleText : '';
    },

    // 获取页面标题日期
    getPageTileDate(pageKey) {
      const page = this.pageConfigs.find(config => config.key === pageKey);
      const titleText = page ? page.titleText : '';
      return this.medicalInsuranceData[titleText]?.title;
    },

    // 类型切换
    changeClick() {
      this.axiosData(true);
    },

    // 医院选择
    hospitalClick() {
      // 传递 false 作为 changeHospital 参数，表示不需要重置医院
      // 传递 true 作为 userSelected 参数，表示这是用户手动选择的医院
      this.axiosData(false, true);
    },

    // 查询点击
    lookClick() {
      this.axiosData();
    },

    // 导出PDF
    exportPDF() {
      this.fullscreenLoading = true;

      // 获取所有页面元素
      const pageElements = document.querySelectorAll('.home-page');
      this.totalPages = pageElements.length;
      // 使用1920×1080尺寸，与原页面保持一致
      const pdf = new jsPDF('landscape', 'mm', [1080, 1920]);

      // 页面计数器
      this.processedPages = 0;

      // 处理每个页面
      const processPage = index => {
        if (index >= this.totalPages) {
          // 所有页面处理完成，保存PDF
          pdf.save(
            `医保DRG运营分析报告 - ${this.medicalInsuranceData['首页'].title}${this.medicalInsuranceData['首页'].medGroupDep ? '(' + this.medicalInsuranceData['首页'].medGroupDep + ')' : ''}.pdf`
          );
          this.fullscreenLoading = false;
          return;
        }

        // 当前页面元素
        const pageElement = pageElements[index];

        // 确保页面可见以便截图
        pageElement.scrollIntoView();

        // 转换为图像 - 使用原始尺寸1920×1080
        domtoimage
          .toJpeg(pageElement, {
            quality: 1,
            bgcolor: '#fff',
            width: 1920,
            height: 1080,
          })
          .then(imageData => {
            // 不是第一页时添加新页
            if (index > 0) {
              pdf.addPage();
            }

            // 添加图像到PDF - 使用固定尺寸1920×1080
            pdf.addImage(imageData, 'JPEG', 0, 0, 1920, 1080);

            // 处理下一页
            this.processedPages++;
            this.$nextTick(() => {
              processPage(index + 1);
            });
          })
          .catch(error => {
            console.error('导出页面错误:', error, '页码:', index);
            // 尽管错误，继续处理下一页
            this.processedPages++;
            this.$nextTick(() => {
              processPage(index + 1);
            });
          });
      };

      // 开始处理第一页
      this.$nextTick(() => {
        // 延迟一小段时间开始处理，确保UI更新
        setTimeout(() => {
          processPage(0);
        }, 500);
      });
    },

    // 编辑模式切换
    editSwitchChange() {},

    // 病组编码输入
    inputClick() {
      axios
        .post(window.apiUrl.python + 'new_drgs/find_drg_diagnosis_report', {
          drg_code: this.form.drg_code,
        })
        .then(res => {
          if (res.data.code === '0000' && res.data.data.length) {
            this.diagnosisReportList = res.data.data;
            // 更新pageTile20_1Key对应页面配置的titleText
            const pageTile20_1Index = this.pageConfigs.findIndex(config => config.key === 'pageTile20_1Key');
            if (pageTile20_1Index !== -1) {
              this.pageConfigs[pageTile20_1Index].titleText = `以${this.form.drg_code}病组为例`;
            }
            this.$nextTick(() => {
              this.$refs.pageTile20_1Refs.init(res.data.data);
            });
          } else {
            if (this.form.drg_code.length) {
              this.$message({ type: 'error', message: `未查询到以${this.form.drg_code}病组为例` });
            }
            this.diagnosisReportList = [];
          }
        });
    },

    // 获取科室列表
    fetchDepartments(hosCode) {
      axios
        .post(window.apiUrl.python + 'new_drgs/find_depart_drgs_settle_report_medGroupDeps', {
          hosCode: hosCode,
        })
        .then(res => {
          this.departmentList = res.data?.data || [];
          if (this.departmentList.length) {
            this.form.departmentValue = this.departmentList[0];
          } else {
            this.form.departmentValue = '';
          }
        })
        .catch(() => {
          this.form.departmentValue = '';
          this.departmentList = [];
        });
    },

    // 主数据请求方法
    axiosData(changeHospital = false, userSelected = false) {
      this.randomKey = Math.random();
      this.loadingShow = true;

      if (this.form.typeValue === '全院') {
        this.fetchHospitals('全院', changeHospital, userSelected);
      } else {
        this.fetchHospitals('非全院', changeHospital, userSelected);
      }
    },

    // 获取医院列表
    fetchHospitals(type, changeHospital, userSelected = false) {
      const url = type === '全院' ? 'new_drgs/find_drgs_settle_report_hosCodes' : 'new_drgs/find_depart_drgs_settle_report_hosCodes';

      // 保存用户选择的医院值，以便在请求完成后恢复
      const selectedHospital = userSelected ? this.form.hospitalValue : null;

      axios
        .get(window.apiUrl.python + url)
        .then(res => {
          this.hospitalList = res.data?.data || [];

          // 如果是用户选择的医院，保持选择不变
          // 否则，按照原有逻辑处理
          if (userSelected && selectedHospital) {
            // 确保选择的医院在列表中
            if (this.hospitalList.includes(selectedHospital)) {
              this.form.hospitalValue = selectedHospital;
            }
          } else if (changeHospital || (this.hospitalList.length && !this.form.hospitalValue)) {
            // 只有在未选择医院或强制更改时才设置为第一个
            this.form.hospitalValue = this.hospitalList[0] || '';
          }

          if (this.form.typeValue === '全院') {
            this.fetchReportData();
          } else {
            this.fetchDepartments(this.form.hospitalValue);
            this.fetchReportData();
          }
        })
        .catch(() => {
          this.hospitalList = [];
          this.form.hospitalValue = '';
          this.loadingShow = false;
        });
    },

    // 获取报表数据
    fetchReportData() {
      const url = this.form.typeValue === '全院' ? 'new_drgs/find_drgs_settle_report' : 'new_drgs/find_depart_drgs_settle_report';

      const params =
        this.form.typeValue === '全院'
          ? { hosCode: this.form.hospitalValue }
          : {
              hosCode: this.form.hospitalValue,
              medGroupDep: this.form.departmentValue,
            };

      axios
        .post(window.apiUrl.python + url, params)
        .then(res => {
          this.medicalInsuranceData = res.data?.data?.result || {};
          this.processReportData();
        })
        .catch(() => {
          this.loadingShow = false;
        });
    },

    // 处理报表数据
    processReportData() {
      // 处理动态标题键
      const keyList = Object.keys(this.medicalInsuranceData);
      keyList.forEach(key => {
        // 查找需要更新titleText的页面配置
        const updatePageTitleText = (pageKey, newTitleText) => {
          const index = this.pageConfigs.findIndex(config => config.key === pageKey);
          if (index !== -1) {
            this.pageConfigs[index].titleText = newTitleText;
          }
        };

        if (key.includes('超支排名第1科室') && key.includes('医疗服务效率变化趋势')) {
          updatePageTitleText('pageTile15_3Key', key);
        } else if (key.includes('超支排名第1科室') && key.includes('结余变化趋势')) {
          updatePageTitleText('pageTile15_4Key', key);
        } else if (key.includes('超支排名第2科室') && key.includes('医疗服务效率变化趋势')) {
          updatePageTitleText('pageTile15_5Key', key);
        } else if (key.includes('超支排名第2科室') && key.includes('结余变化趋势')) {
          updatePageTitleText('pageTile15_6Key', key);
        } else if (key.includes('超支排名第3科室') && key.includes('结余变化趋势')) {
          updatePageTitleText('pageTile15_13Key', key);
        } else if (key.includes('超支排名第4科室') && key.includes('结余变化趋势')) {
          updatePageTitleText('pageTile15_15Key', key);
        } else if (key.includes('超支排名第5科室') && key.includes('结余变化趋势')) {
          updatePageTitleText('pageTile15_17Key', key);
        } else if (key.includes('超支排名第3科室') && key.includes('医疗服务效率变化趋势')) {
          updatePageTitleText('pageTile15_20Key', key);
        } else if (key.includes('超支排名第4科室') && key.includes('医疗服务效率变化趋势')) {
          updatePageTitleText('pageTile15_21Key', key);
        } else if (key.includes('超支排名第5科室') && key.includes('医疗服务效率变化趋势')) {
          updatePageTitleText('pageTile15_22Key', key);
        }
      });
      // 初始化组件
      this.$nextTick(() => {
        this.initComponents();
        this.inputClick();
        this.loadingShow = false;
      });
    },

    // 初始化所有组件
    initComponents() {
      this.pageConfigs.forEach(page => {
        if (page.type === 'content' && this.shouldShowPage(page)) {
          const compRef = this.$refs[`${page.component}Refs`];
          const dataKey = page.titleText;
          if (compRef && compRef[0] && compRef[0].init) {
            // 费用构成相关组件列表
            const costComponents = ['pageTile15_1Key', 'pageTile15_2Key', 'pageTile15_8Key', 'pageTile15_9Key', 'pageTile15_10Key', 'pageTile15_12Key', 'pageTile15_14Key', 'pageTile15_16Key'];
            // 判断是否需要传递特定上下文
            let context;
            if (costComponents.includes(page.key)) {
              // 费用构成相关组件传递"全院费用构成"参数
              context = '全院费用构成';
            } else if (
              page.key === 'pageTile6Key' ||
              page.key === 'pageTile7Key' ||
              page.key === 'pageTile19Key' ||
              page.key === 'pageTile20Key' ||
              page.key === 'pageTile22Key' ||
              page.key === 'pageTile23Key'
            ) {
              // 这些组件继续传递原来的参数
              context = this.form.typeValue;
            } else if (
              page.key === 'pageTile12Key' ||
              page.key === 'pageTile12_1Key' ||
              page.key === 'pageTile12_2Key' ||
              page.key === 'pageTile12_3Key' ||
              page.key === 'pageTile12_4Key' ||
              page.key === 'pageTile12_5Key' ||
              page.key === 'pageTile13Key' ||
              page.key === 'pageTile19_1Key' ||
              page.key === 'pageTile19_2Key' ||
              page.key === 'pageTile19_3Key' ||
              page.key === 'pageTile19_4Key' ||
              page.key === 'pageTile19_5Key' ||
              page.key === 'pageTile19_6Key' ||
              page.key === 'pageTile19_7Key' ||
              page.key === 'pageTile19_8Key' ||
              page.key === 'pageTile19_9Key' ||
              page.key === 'pageTile19_10Key' ||
              page.key === 'pageTile19_11Key' ||
              page.key === 'pageTile19_12Key' ||
              page.key === 'pageTile19_13Key' ||
              page.key === 'pageTile19_14Key'
            ) {
              context = dataKey;
            }
            compRef[0].init(this.medicalInsuranceData[dataKey], context);
          }
        }
      });
    },

    // 编辑弹窗点击
    editDialogClick(componentName) {
      const page = this.pageConfigs.find(config => config.component === componentName);
      this.editForm.title = page ? page.titleText : '';
      this.editForm.date = this.medicalInsuranceData[page?.titleText]?.title;
      this.activePageTileKey = page ? page.titleText : '';
      this.activePageRefs = `${componentName}Refs`;
      this.showEditDialog = true;
    },

    // 关闭弹窗
    closeDialog() {
      this.showEditDialog = false;
    },

    // 确认编辑
    confirmEdit() {
      this.closeDialog();
    },

    // JSON数据变更
    onJsonChange() {
      const compRef = this.$refs[this.activePageRefs];
      if (compRef && compRef.init) {
        compRef.init(this.medicalInsuranceData[this.activePageTileKey]);
      }
    },
  },
  created() {
    this.axiosData(true);
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-input__inner {
  width: 200px;
}

.home {
  padding: 0;
  width: 1920px;
  background: #fff;

  .pdf {
    padding: 20px;
    position: fixed;
    top: 100px;
    right: 10px;
    color: #fff;
    background: #1a7bbf;
    border-radius: 8px;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
    }
  }

  .loading-class {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    line-height: 100vh;
    font-size: 3rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
  }

  .loader {
    margin-left: 20px;
    width: 50px;
    aspect-ratio: 1;
    --_c: no-repeat radial-gradient(farthest-side, #25b09b 92%, #0000);
    background: var(--_c) top, var(--_c) left, var(--_c) right, var(--_c) bottom;
    background-size: 12px 12px;
    animation: l7 1s infinite;
  }

  @keyframes l7 {
    to {
      transform: rotate(0.5turn);
    }
  }

  .home-page {
    height: 1080px;
    width: 1920px;
  }

  .home-form-box {
    padding: 20px;
    position: fixed;
    top: 100px;
    left: 10px;
    background: #409eff;
    border-radius: 8px;
    z-index: 1;

    .home-form {
      display: flex;
      align-items: center;
      justify-content: center;

      /deep/ .el-form-item__label {
        color: #fff;
      }

      .el-form-item {
        margin-bottom: 0 !important;
      }
    }
  }

  .home-page-1 {
    background-image: url('./static/home/page1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .home-title-1 {
      position: absolute;
      top: 40%;
      left: 3%;
      width: 83%;
      height: 10%;
      background: #fff;
      z-index: 2;
      -webkit-clip-path: polygon(75% 0%, 76% 50%, 75% 100%, 0% 100%, 0 50%, 0% 0%);
      clip-path: polygon(75% 0%, 76% 50%, 75% 100%, 0% 100%, 0 50%, 0% 0%);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

      .home-title-1-1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 99.5%;
        height: 95%;
        background: #4874cb;
        -webkit-clip-path: polygon(75% 0%, 76% 50%, 75% 100%, 0% 100%, 0 50%, 0% 0%);
        clip-path: polygon(75% 0%, 76% 50%, 75% 100%, 0% 100%, 0 50%, 0% 0%);

        .home-title-1-1-content {
          padding-right: 25%;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          font-size: 3rem;
          color: #fff;
          box-sizing: border-box;
        }
      }
    }

    .home-title-2 {
      position: absolute;
      top: 52%;
      left: 45%;
      display: flex;
      align-items: flex-end;

      .home-title-2-1 {
        font-size: 2.2rem;
      }
    }

    .home-title-3 {
      position: absolute;
      top: 1000px;
      left: 3%;
      font-size: 1.5rem;
      color: #595959;
    }

    .home-title-4 {
      position: absolute;
      top: 32%;
      left: 3%;
      font-size: 3rem;
      color: #595959;
      letter-spacing: 12px;
    }

    .home-title-5 {
      position: absolute;
      top: 40%;
      left: 3%;
      font-size: 3rem;
      width: 61.5%;
      height: 10%;
      box-shadow: 0 30px 30px -10px rgba(0, 0, 0, 0.4);
      z-index: 1;
    }
  }

  .home-page-2 {
    display: flex;

    .home-page-2-left {
      margin: auto 0;
      flex: 0.3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 70%;
      color: #4874cb;
      text-align: center;
      border-right: 2px dashed #dcdcdc;

      .home-page-2-left-1 {
        font-size: 4.5rem;
        font-weight: 600;
      }

      .home-page-2-left-2 {
        margin-top: 20px;
        font-size: 2rem;
      }
    }

    .home-page-2-right {
      padding-left: 15%;
      margin: auto;
      flex: 0.7;
      font-size: 3.5rem;

      .home-page-2-right-1,
      .home-page-2-right-2,
      .home-page-2-right-3,
      .home-page-2-right-4,
      .home-page-2-right-5,
      .home-page-2-right-6 {
        margin: 30px 0;
      }
    }
  }

  .no-data {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .home-end {
    width: 100%;
    height: 100%;
    background-image: url('./static/home/page2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  // 编辑弹窗样式
  .edit-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: 1500px;
    height: 70vh;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    &__content {
      padding: 20px;
      height: 100%;
    }

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }

    &__title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    &__close {
      font-size: 24px;
      color: #999;
      cursor: pointer;

      &:hover {
        color: #666;
      }
    }

    &__body {
      margin-bottom: 20px;
      height: 85%;
    }

    &__form-item {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }

    &__label {
      width: 80px;
      text-align: right;
      margin-right: 10px;
      color: #666;
    }

    &__input {
      flex: 1;
      height: 36px;
      padding: 0 10px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      outline: none;

      &:focus {
        border-color: #4874cb;
      }
    }

    &__footer {
      display: flex;
      justify-content: flex-end;
    }

    &__btn {
      padding: 8px 20px;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      background: #fff;
      font-size: 14px;
      margin-left: 10px;

      &--cancel {
        &:hover {
          color: #4874cb;
          border-color: #4874cb;
        }
      }

      &--confirm {
        background-color: #4874cb;
        color: #fff;
        border-color: #4874cb;

        &:hover {
          background-color: #3a67b8;
        }
      }
    }
  }

  // 遮罩层
  .edit-dialog__mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
}
</style>
